<template>
    <div>
        <div class="form-header">
            {{ type == "create" ? "添加品牌" : "修改品牌" }}
            <el-button type="success" @click="save" :loading="saveLoading"
                >保存</el-button
            >
        </div>
        <div class="gva-form-box">
            <div class="form-box">
                <el-form
                    :model="formData"
                    ref="elFormRef"
                    :rules="rule"
                    label-width="120px"
                >
                    <el-form-item label="品牌名称:" prop="brandName">
                        <el-input
                            v-model="formData.brandName"
                            :clearable="true"
                            placeholder="请输入品牌名称"
                        />
                    </el-form-item>
                    <el-form-item label="客户编号:" prop="customerNum">
                        <el-input
                            v-model="formData.customerNum"
                            :clearable="true"
                            placeholder="请输入客户编号"
                        />
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { createSbuData, updateSbuData, findSbuData } from "@/api/confSbuData";

defineOptions({
    name: "confBrandDataAdd",
});

// 自动获取字典
import { getDictFunc } from "@/utils/format";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { emitter } from "@/utils/bus.js";

import { getUserList } from "@/api/user";
import {
    createBrandData,
    deleteBrandData,
    deleteBrandDataByIds,
    updateBrandData,
    findBrandData,
    getBrandDataList,
} from "@/api/confBrandData";

const route = useRoute();
const router = useRouter();

const type = ref("");
const formData = ref({
    customerNum: "",
    customerBrand: "",
});
const saveLoading = ref(false);

const memberListOptions = ref([]); // 人员列表
const customerListOptions = ref([]); // 客户列表

// 验证规则
const rule = reactive({
    brandName: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
    customerNum: [
        { required: true, message: "请输入客户编号", trigger: "blur" },
    ],
});

const elFormRef = ref();

// 初始化方法
const init = async () => {
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (route.query.ID) {
        type.value = "update";
        const res = await findBrandData({ ID: route.query.ID });
        if (res.code === 0) {
            formData.value = res.data.rebrandData;
        }
    } else {
        type.value = "create";
    }
};

init();
// 保存按钮
const save = async () => {
    elFormRef.value?.validate(async (valid) => {
        if (!valid) return;
        let res;
        saveLoading.value = true;
        switch (type.value) {
            case "create":
                res = await createBrandData(formData.value);
                break;
            case "update":
                res = await updateBrandData(formData.value);
                break;
            default:
                res = await createBrandData(formData.value);
                break;
        }
        saveLoading.value = false;
        emitter.emit("closeThisPage");
        if (res.code === 0) {
            ElMessage({
                type: "success",
                message: type.value == "create" ? "创建成功" : "更改成功",
            });
        }
    });
};

// 返回按钮
const back = () => {
    router.go(-1);
};
</script>

<style lang="scss" scoped>
.form-header {
    font-size: 22px;
    font-weight: 600;
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #ccc5;
    display: flex;
    justify-content: space-between;
}
.form-box {
    width: 45%;
    margin: 0 auto;
}
.form-footer {
    text-align: center;
}
</style>
